<template>
  <div class="createProgram" v-loading="loading">
    <div class="title">创 建 项 目</div>
    <!-- 项目logo -->
    <cpro-logo @upLoadLogo="logoUpdate"></cpro-logo>
    <!-- 选择项目类型 -->
    <cpro-type
      :typesDescribe="typesDescribe"
      @update-type="projectTypeUpdate"
      ref="typeRef"
    ></cpro-type>
    <!-- 需支持的客户端 -->
    <cpro-adaptation
      :chooses="chooses"
      :adaptation="project.adaptation"
      @update-adaptation="adaptationUpdate"
    ></cpro-adaptation>
    <!-- 项目名 -->
    <cpro-programname
      ref="projectNameRef"
      @update-program-name="projectNameUpdate"
    ></cpro-programname>
    <!-- 需求描述 -->
    <cpro-requirement
      :project-describe="project.projectDescribe"
      @requirementUpdate="requirementUpdate"
      @addition="addition"
      ref="requirementRef"
    ></cpro-requirement>
    <!-- 项目积分 -->
    <cproPoints
      :projectScore="project.projectScore"
      @update-score="ScoreUpdate"
      ref="pointsRef"
    ></cproPoints>
    <div class="subBtn">
      <el-button type="primary" @click="submitForm"> 创 建 </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import cproLogo from './c-cpns/cpro-logo.vue'
import cproType from './c-cpns/cpro-type.vue'
import cproAdaptation from './c-cpns/cpro-adaptation.vue'
import cproProgramname from './c-cpns/cpro-programname.vue'
import cproRequirement from './c-cpns/cpro-requirement.vue'
import cproPoints from './c-cpns/cpro-points.vue'
import type { createProjectType } from '../../../types/project'
import {onMounted, reactive, ref} from 'vue'
import { typesDescribe, chooses } from '@/global/constants'
import { upLoadFile, addProject } from '@/service/project/project'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const route = useRouter()
const loading = ref(false)

//各组件实例
const pointsRef = ref<InstanceType<typeof cproPoints>>()
const typeRef = ref<InstanceType<typeof cproType>>()
const projectNameRef = ref<InstanceType<typeof cproProgramname>>()
const requirementRef = ref<InstanceType<typeof cproRequirement>>()
//项目变量
const project = reactive<createProjectType>({
  projectLogo: 'https://power-orders.oss-cn-shenzhen.aliyuncs.com/1717302447932*logo.png',
  projectType: '',
  adaptation: [],
  projectName: '',
  projectDescribe: '',
  projectFile: 'https://power-orders.oss-cn-shenzhen.aliyuncs.com/1717302447932*logo.png',
  projectScore: 0
})
let tempLogo = new FormData()
let tempFile = new FormData()
//头像更新
const logoUpdate = (value: FormData): void => {
  tempLogo = value
}

//接收子组件的传值由父组件修改，支持客户端
const adaptationUpdate = (value: any): void => {
  project.adaptation = value
}
//修改项目名
const projectNameUpdate = (value: any): void => {
  project.projectName = value
}

//修改项目描述
const requirementUpdate = (value: any): void => {
  project.projectDescribe = value
}
//附件
const addition = (value: FormData): void => {
  tempFile = value
}
//修改积分的值
const ScoreUpdate = (value: any): void => {
  project.projectScore = value
}
//修改项目类型
const projectTypeUpdate = (value: any): void => {
  project.projectType = value
}
//上传logo
async function uploadLogo(formData: FormData) {
  try {
    const response = upLoadFile(formData)
    return response.data
  } catch (error) {
    console.error('上传Logo失败')
  }
}
//上传文件
async function uploadAddition(formData: FormData) {
  try {
    const response = upLoadFile(formData)
    return response.data
  } catch (error) {
    console.error('上传文件失败')
  }
}
//项目的创建
const submitForm = async () => {
  loading.value = true
  try {
    if (typeRef.value?.vailDate()) return
    if (!projectNameRef.value?.upLoadProjectName()) return
    if (requirementRef.value?.vailDate()) return
    if (!pointsRef.value?.upLoadPoints()) return
    //上传logo
    if (tempLogo.has('file')) {
      project.projectLogo = await uploadLogo(tempLogo)
    }
    //上传文件
    if (tempFile.has('file')) {
      project.projectFile = await uploadAddition(tempFile)
    }
    console.log(project)
    await addProject(project)
    loading.value = false
    await route.push('/main/projects/implementation')
    ElMessage.success(`创建成功`)
  } catch (error) {
    ElMessage.error(`创建失败`)
  }
}
onMounted(() => {
  document.title = '创建项目 - 实力接单'
})
</script>

<style lang="less" scoped>
.createProgram {
  width: 1100px;
  padding: 24px 24px 12px;
  background: #fff;
  border-radius: 8px;
  margin: 20px auto;
}
.title {
  text-align: center;
  height: 40px;
  font-size: 28px;
  font-weight: 500;
  color: #0b121a;
  line-height: 40px;
  margin: 0 auto 0;
}

.subBtn {
  display: inline-flex;
  margin-top: 10px;
  width: 100%;
  justify-content: center;
  .el-button {
    width: 100px;
  }
}
</style>
